/****************
结果填报
* */
<template>
  <basic-container>
    <el-row>
      <targetExaminHead :sign="{f:true}" />
    </el-row>
    <el-row v-if="isFillIn==1">
      <el-row style="margin:25px 0 0 0 ;">
        <div :height="searchheight">
          <span
            style="float:right;margin-top: -30px;cursor: pointer;"
            @click="searchchangeadvanced"
          >
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="searchForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="考核对象">
                <el-input v-model="searchForm.assessRealName" placeholder="考核对象" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核名称">
                <el-input v-model="searchForm.name" placeholder="考核名称" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核周期">
                <selectSearch @getDataByPerid="getDataByPerid"></selectSearch>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                >检索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-row>
      <el-row>
        <div style="height: 50px; border-bottom: 1px solid #b0bde2">
          <div class="pull-right">
            <el-button type="primary" @click="download">导出</el-button>
            <el-button type="primary" @click="templateManage">模板管理</el-button>
            <el-button type="primary" @click="batchFilling" :disabled="canFillIn">批量填报</el-button>
            <el-button type="primary" @click="submitData">提交</el-button>
          </div>
        </div>
      </el-row>
      <div style="margin:20px 0 0 0 ">
        <span>指标考核&nbsp;&nbsp;</span>
        <el-radio-group v-model="choosePerOrDept" @change="choosePerOrDeptChange">
          <el-radio :label="0">人员</el-radio>
          <el-radio :label="1">机构</el-radio>
        </el-radio-group>
      </div>
      <el-row>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          ref="tableRef"
          stripe
          header-align="center"
          v-loading="dataListLoading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="55"></el-table-column>
          <el-table-column
            prop="assessUserName"
            align="center"
            label="员工编号"
            show-overflow-tooltip
            v-if="!choosePerOrDept"
          ></el-table-column>
          <el-table-column
            prop="assessRealName"
            align="center"
            label="考核对象"
            show-overflow-tooltip
            v-if="!choosePerOrDept"
          >
            <template slot-scope="scope">
              <span
                style="color:#0e258c;cursor:pointer"
                @click="startFillIn(scope.row)"
              >{{scope.row.assessRealName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="assessDeptName"
            align="center"
            label="考核对象"
            show-overflow-tooltip
            v-else
          >
            <template slot-scope="scope">
              <span
                style="color:#0e258c;cursor:pointer"
                @click="startFillIn(scope.row)"
              >{{scope.row.assessDeptName}}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="assessDeptName"
            align="center"
            label="部门"
            show-overflow-tooltip
            v-if="!choosePerOrDept"
          ></el-table-column>
          <el-table-column prop="itemNum" align="center" label="指标数量" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" align="center" label="考核名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="period" align="center" label="考核周期" show-overflow-tooltip></el-table-column>
          <el-table-column prop="state" align="center" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.state | transTargetState}}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageData.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageData.pageSize"
            :total="pageData.totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </el-row>
    <el-row v-if="isFillIn==2">
      <el-row>
        <el-row style="width:100%">
          <el-form
            style="display:flex;margin:20px 0 0 0 "
            :inline="true"
            :model="searchWriteForm"
            ref="searchWriteNode"
          >
            <el-form-item label="员工编号" prop="assessKpiId">
              <el-input v-model="searchWriteForm.assessKpiId" placeholder="员工编号"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="assessRealName">
              <el-input v-model="searchWriteForm.assessRealName" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchDetail">搜索</el-button>
              <el-button type="primary" @click="resetData">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </el-row>
      <el-row>
        <div style="height: 50px; border-bottom: 1px solid #b0bde2">
          <div class="pull-right">
            <el-button type="primary" @click="exportData">导出</el-button>
            <el-button type="primary" @click="exportData">导入</el-button>
          </div>
        </div>
      </el-row>
      <el-row>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="detailDataList"
          border
          v-if="isFillIn==2"
          stripe
          v-loading="dataListLoading"
          @selection-change="handleSelectionChange1"
        >
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column prop="assessKpiId" align="center" label="员工编号"></el-table-column>
          <el-table-column prop="assessRealName" align="center" label="姓名" show-overflow-tooltip></el-table-column>
          <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip></el-table-column>
          <el-table-column prop="type" align="center" label="指标类别" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" align="center" label="指标名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="formula" align="center" label="计算公式" show-overflow-tooltip></el-table-column>
          <el-table-column prop="targetValue" align="center" label="目标值" show-overflow-tooltip></el-table-column>
          <el-table-column prop="unit" align="center" label="单位" show-overflow-tooltip></el-table-column>
          <el-table-column prop="normRule" align="center" label="指标规则" show-overflow-tooltip></el-table-column>
          <el-table-column prop="finishValue" align="center" label="完成值" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.finishValue"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="score" align="center" label="得分" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.score"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row style="margin:10px;text-align:right">
        <el-button type="primary" @click="goBack">返回</el-button>
        <el-button type="primary" @click="confirmFillIn">确 定</el-button>
      </el-row>
    </el-row>
    <!-- 拟定汇总 -->
    <el-row v-if="isFillIn==3">
      <TianBaoTable
        v-if="isFillIn == 3"
        ref="tianbaotable"
        :tianBaoTable="tianBaoTable"
        :ids="ids"
        :radio="radio"
        @fnBackOldPage="fnBackOldPage"
        :ndids="ndids"
      ></TianBaoTable>
    </el-row>
    <temanagementDialog :temanagementDialogData="temanagementDialogData"></temanagementDialog>
    <customDialog :customDialogData="customDialogData" @customDialogChildren="customDialogChildren"></customDialog>

    <el-dialog title="请选择：" :visible.sync="chooseVisible" width="30%">
      <div style="display: flex; justify-content: space-around">
        <el-button type="warning" @click="customBtn">自定义流程</el-button>
        <el-dropdown>
          <el-button type="primary" size="small" v-if="temList.length > 0">
            模板
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-button type="primary" size="small" v-else>暂无模板</el-button>
          <el-dropdown-menu v-if="temList.length > 0">
            <el-dropdown-item v-for="(item, index) in temList" :key="index">
              <span
                @click="temBtn(item)"
                v-loading.fullscreen.lock="fullscreenLoading"
              >{{ item.templateName }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-dialog>
    <targetFillin v-if="deptVisible" ref="deptNode" @closeDialog="closeDialog1" />
  </basic-container>
</template>

<script>
import targetExaminHead from "@/views/dailyExamine/components/targetExaminHead"; //状态头
import temanagementDialog from "./temanagementDialog";
import TianBaoTable from "./htndhuizong-table.vue";
import customDialog from "./customDialog";
import { examineList } from "@/api/dailyExamine/targetExamine/createAssessment"; //接口api
import {
  getListMb,
  judgeFalg,
  checkIsFill
} from "@/api/dailyExamine/targetExamine/indicatorFormulation";
import targetFillin from "./targetFillin.vue";

import {
  resultFillList,
  resultFillDetail,
  resultFillSave,
  resultFillSubmit,
  submitJgByTemplate,
  resultFillExportExcel
} from "@/api/dailyExamine/targetExamine/InitiateFilling";
import selectSearch from "@/views/dailyExamine/components/select-search.vue"; //流程组件

export default {
  data() {
    return {
      isjgsh: Number,
      deptVisible: false, //

      choosePerOrDept: 0,
      customDialogData: {},

      chooseVisible: false,
      temList: [],
      canFillIn: true,
      temanagementDialogData: {},
      isPlanSummary: false,
      tianBaoTable: {},
      ids: [],
      radio: "1",
      ndids: [],
      multipleSelection1: [], //详情的勾选数据
      detailDataList: [], //填报显示的表格数组
      isFillIn: 1, //是否填报
      searchWriteForm: {
        //填报的搜索对象
        assessKpiId: null,
        assessRealName: null
      },
      searchheight: "0", //搜索组件的高度
      searchadvanced: true, //搜索的显隐
      searchForm: {}, //搜索对象
      dataListLoading: false, //表格是否加载
      dataList: [], //表格数组
      multipleSelection: [], //勾选数据
      pageData: {
        //分页对象
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0
      },
      copyData: [], //复制数组暂存 数据
      fullscreenLoading: false
    };
  },
  filters: {
    transState(val) {
      switch (val) {
        case 0:
          return "待提交";
          break;
        case 1:
          return "已提交";
          break;
        case 2:
          return "待填报";
          break;
        case 3:
          return "已填报";
          break;
        case 4:
          return "汇总通过";
          break;
        default:
          break;
      }
    }
  },
  watch: {
  /*  multipleSelection: {
      handler(val) {
        if (val.length == 0) {
          this.canFillIn = true;
        } else {
          this.canFillIn = false;
        }
      }
    }*/
  },
  components: {
    targetFillin,
    customDialog,
    TianBaoTable,
    temanagementDialog,
    targetExaminHead, //状态头
      selectSearch//搜索栏目下拉组件
  },
  created() {
    this.getDataList();
  },
  methods: {
    choosePerOrDeptChange(val) {
      this.searchForm = {};
      this.dataList = [];
      this.getDataList();
    },
    customDialogChildren(data) {
      this.getDataList();
    },
    // 选择模板
    temBtn(e) {
      this.fullscreenLoading = true;
      this.type = 1;
      var params = {
        type: this.type,
        isjgsh: this.isjgsh,
        rows: this.$refs.tableRef.selection,
        templateId: e.id
      };
      submitJgByTemplate(params).then(res => {
        this.fullscreenLoading = false;
        this.$message.closeAll();
        this.$message.success("操作成功");
        this.chooseVisible = false;
        this.getDataList();
      });
    },
    // 自定义流程
    customBtn() {
      this.chooseVisible = false;
      this.type = 2;
      this.customDialogData = {
        dialogVisible: true,
        type: this.type,
        isjgsh: this.isjgsh,
        rows: this.$refs.tableRef.selection,
        menuType: "zbnd"
      };
    },
    fnBackOldPage(data) {
      this.isFillIn = 1;
      this.ids = [];
      this.multipleSelection = [];
      this.getDataList();
    },
    // 模板管理
    templateManage() {
      this.temanagementDialogData = {
        dialogVisible: true,
        type: "结果填报"
      };
    },
    // 批量填报
    batchFilling() {
      // this.isFillIn = 3;
      // this.tianBaoTable = {
      //   lastPage: "zbnd"
      // };
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择数据");
      } else {
        this.isFillIn = 3;
        this.tianBaoTable = {
          lastPage: "zbnd"
        };
      }
    },
    fngetListMb() {
      var params = {
        menuType: "结果填报",
        tagName: "指标考核"
      };
      getListMb(params).then(res => {
        this.temList = res.data.data;
      });
    },
    // 提交
    submitData() {
      let _that = this;
      if (_that.multipleSelection.length == 0) {
        _that.$message.warning("请先选择数据");
      } else {
        _that
          .$confirm("是否跳过结果填报审核?", "提示", {
            confirmButtonText: "是",
            cancelButtonText: "否",
            type: "warning"
          })
          .then(result => {
            console.log("是跳过");
            _that.isjgsh = 0;

            let ids = _that.multipleSelection.map(it => {
              return it.id;
            });
            resultFillSubmit(ids.toString())
              .then(r => {
                if (r.data.code == 0) {
                  _that.$message.success("提交成功");
                  _that.getDataList();
                } else {
                  _that.$message.error(r.data.msg);
                  _that.getDataList();
                }
              })
              .catch(err => {
                _that.getDataList();
              });
          })
          .catch(err => {
            console.log("不跳过");
            _that.isjgsh = 1;
            _that.chooseVisible = true;
            _that.fngetListMb();
          });
      }
    },
    // 重置
    resetData() {
      this.detailDataList = this.copyData;
      this.$refs.searchWriteNode.resetFields();
    },
    // 查询详情
    searchDetail() {
      this.detailDataList = this.detailDataList.filter(it => {
        return (
          it.assessRealName.includes(this.searchWriteForm.assessRealName) ||
          it.assessKpiId.includes(this.searchWriteForm.assessKpiId)
        );
      });
    },
    // 详情填写完确定
    confirmFillIn() {
      resultFillSave(this.detailDataList)
        .then(r => {
          if (r.data.code == 0) {
            this.$message.success("保存成功");
            this.goBack();
            this.getDataList();
          } else {
            this.$message.error(r.data.msg);
            this.goBack();
            this.getDataList();
          }
        })
        .catch(err => {});
    },
    // 返回
    goBack() {
      this.isFillIn = 1;
    },
    closeDialog1() {
      this.deptVisible = false;
      this.getDataList();
    },
    //   填报
    startFillIn(data) {
      //按填报启动限制
      judgeFalg(data.assessId)
        .then(r => {
          if (r.data.data.completeState == 0) {
            this.$message.error("填报状态已关闭！");
          } else if (r.data.data.completeState == 1) {
            this.deptVisible = true;
            this.$nextTick(() => {
              this.$refs.deptNode.init(data);
            });
          }
        })
        .catch(err => {});
    },
   /* // 勾选数据
    handleSelectionChange(val) {

        this.multipleSelection = val;


    },*/
    // 导出
    download() {
      var data = this.multipleSelection;
      if (data.length == 0) {
        this.$message.closeAll();
        this.$message.warning("请选择一个工作！");
        return;
      }
      var filename = "结果填报导出" + ".xlsx";
      var ids = [];
      for (var i = 0; i < data.length; i++) {
        ids.push(data[i].id);
      }
      resultFillExportExcel({
        ids: ids
      }).then(response => {
        this.$message.closeAll();
        this.$message.success("导出成功!");
        let url = window.URL.createObjectURL(new Blob([response.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", filename);
        document.body.appendChild(link);
        link.click();
      });
    },
    // 查询条件的展开关闭
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 查询列表
    getDataList() {
      this.dataListLoading = true;
      examineList(
        Object.assign(
          {
            current: this.pageData.pageIndex,
            size: this.pageData.pageSize,
            type: this.choosePerOrDept
          },
          this.searchForm
        ),
        6
      )
        .then(r => {
          if (r.data.code == 0) {
            this.dataListLoading = false;
            this.dataList = r.data.data.records;
            this.pageData.totalPage = r.data.data.total;
          }
        })
        .catch(err => {});
    },
    // 勾选数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val.map(it => {
        return it.id;
      });
      if(val.length != 0){
          if (val[0].type == 0) {
              this.radio = 1;
          } else {
              this.radio = 2;
          }

          let assessIds = val.map(it => {
              return it.id;
          });
          //按填报启动限制
          checkIsFill( Object.assign(
              {
                  ids:assessIds.toString()
              }
              )
          )
              .then(r => {
                  console.log(r)
                  if (r.data.code == 0) {
                      if(r.data.data){
                          this.canFillIn = false;
                      }else{
                          this.canFillIn = true;
                          this.$message.error("填报未开启，请重新选择数据");
                      }


                  } else{
                      this.$message.error(r.data.msg);
                  }
              })
              .catch(err => {});
      }


        if (val.length == 0) {
            this.canFillIn = true;
        }

    },
    // 勾选数据
    handleSelectionChange1(val) {
      this.multipleSelection1 = val;
    },
    // 条数变化
    sizeChangeHandle(val) {
      this.pageData.pageSize = val;
      this.getDataList();
    },
    // 页码分页变化
    currentChangeHandle(val) {
      this.pageData.pageIndex = val;
      this.getDataList();
    },
      //选择周期执行搜索功能
      getDataByPerid(period){
          this.searchForm.period = period ;
          this.getDataList() ;
      }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-select__tags {
  overflow: auto !important;
  //   min-height: 200px !important;
}
::v-deep.el-tag.el-tag--info {
  margin: 5px;
  border: 1px solid green;
}
.demo-form-inline {
  display: flex;
}
</style>
